<template>
  <div>
    <el-card class="box-card">
      <div v-for="(item, index) in children" :key="item.id" class="text item">
        <el-row>
          <el-col :span="2">
            <div class="CommentImg">
              <el-avatar
                :src="item.userVo.avatar"
                :size="40"
              ></el-avatar>
            </div>
          </el-col>
          <el-col :span="22">
            <h4 style="display: inline">{{ item.userVo.username }}</h4>
            <span>&nbsp; {{ index + 1 }}楼</span>

            <div class="commentContent">
              <span>{{ item.content }}</span>
              <span class="time" 
                >{{item.commentDate}}</span>
            </div>
          </el-col>
          <el-col :span="24">

          
          </el-col>
        </el-row>
      </div>


    </el-card>
  </div>
</template>

<script>
export default {
  created(){
    console.log(this.children);
  },
  props:['children'],
    data () {
        return {
          comment:[],
            TwoComments: [
        {
          commentSrc:
            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
          name: "王小五",
          commentContent: "傻逼",
        },
        {
          commentHead:
            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
          name: "王小五",
          commentContent: "傻逼",
        },
        {
          commentHead:
            "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
          name: "王小五",
          commentContent: "傻逼",
        },
      ],
        }
    }
};
</script>

<style scoped lang="less">
.text {
  font-size: 12px;
  
}
/deep/.el-card__body {
    padding: 0;
    background-color: #EBEEF5;
}
.item {
    margin-left: 10px;
}


.time {
  float: right;
   margin-right: 10px;
   font-size: 10px;
   font-weight: bold;
   color: #C0C4CC;


}

</style>